<!--import xss from "xss"-->
<template>
  <j-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle ="bodyStyle"
    :switchFullscreen="switchFullscreen"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
      <a-button @click="toHandle">确定</a-button>
    </template>
    <div style="padding: 50px">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item ref="name" label="姓名" >
          <div>{{ record.realName }}</div>
        </a-form-model-item>
        <a-form-model-item label="强戒所" prop="">
          <div>{{ record.durgRehabilitatioName }}</div>
        </a-form-model-item>
        <a-form-model-item label="户籍地详址">
          <div>{{ record.householdAddress }}</div>
        </a-form-model-item>
        <a-form-model-item v-if="tit" label="申请介入部门">
          <div>{{ record.materDatails }}</div>
        </a-form-model-item>
        <a-form-model-item label="需要介入部门" v-if="!tit" prop="departmentApplyId">
          <j-select-depart v-model="form.departmentApplyId" :trigger-change="true" customReturnField="orgCode" :multi="true"></j-select-depart>
        </a-form-model-item>
        <a-form-model-item label="介入专干/社工人员" v-if="tit" prop="professionalsWorker">
          <a-input-search
            v-model="form.professionalsWorker"
            placeholder="请先选择用户"
            readOnly
            unselectable="on"
            @search="onSearchDepUser">
            <a-button slot="enterButton">选择专干社工</a-button>
          </a-input-search>
        </a-form-model-item>
        <a-form-model-item label="说明" prop="explain">
          <a-input placeholder="请输入" v-model="form.explain" type="textarea" />
        </a-form-model-item>
      </a-form-model>
    </div>
    <suoerviseJmodal ref="suoerviseJmodal" @ok="modalFormOk"></suoerviseJmodal>
  </j-modal>
</template>

<script>
import {getUserList} from '@/api/api'
import xss from 'xss'
import {updateBacklog} from "@api/sjsk/specialist";
import suoerviseJmodal from "@views/sjsk/management/join/supervise/suoerviseJmodal";
import {applyInter} from "@api/sjsk/receiveCase";
export default {
  components: {
    suoerviseJmodal
  },
  data () {
    return {
      tit:true,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        professionalsWorker:''
        // completeStart:undefined,
        // feedback:'',
        // file:''
      },
      rules: {
        // file: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
        departmentApplyId: [{ required: true, message: '请选择介入部门', trigger: 'blur' }],
        professionalsWorker: [{ required: true, message: '请选择专干社工人员', trigger: 'blur' }],
        // explain: [{ required: true, message: '', trigger: 'blur' }],
      },
      title:"申请介入",
      record: {},
      visible: false,
      switchFullscreen: true,
      loading: false,
      bodyStyle:{
        padding: "0",
        // height:(window.innerHeight*0.8)+"px",
        "overflow-y":"auto",
      },
      modelStyle:{
        width: '30%',
        style: { top: '20px' },
        fullScreen: false
      }
    }
  },
  created () {
  },
  methods: {
    modalFormOk(val) {
      console.log(val)
      this.form.professionalsWorkerId = val.professionalsWorkerId
      this.form.professionalsWorker = val.professionalsWorker
    },
    onSearchDepUser(){
      this.$refs.suoerviseJmodal.showAdminFun()
    },
    detail (record) {
      this.tit = record.dataSource === 1
      // alert(this.tit)
      this.visible = true
      this.record = record;
    },
    handleCancel () {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    /** 切换全屏显示 */
    handleClickToggleFullScreen() {
      let mode = !this.modelStyle.fullScreen
      if (mode) {
        this.modelStyle.width = '100%'
        this.modelStyle.style.top = '20px'
      } else {
        this.modelStyle.width = '60%'
        this.modelStyle.style.top = '50px'
      }
      this.modelStyle.fullScreen = mode
    },
    toHandle(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // delete this.form.professionalsWorker
          this.form = Object.assign({}, {personId: this.record.id},this.form)
          console.log(this.form)
          applyInter(this.form).then(ser => {
            if(ser.success){
             this.$message.success('介入成功')
              this.visible = false
              this.form = {}
              this.form.professionalsWorker = ''
            } else {
              this.$message.error(ser.message)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style lang="less">
.announcementCustomModal{
  .ant-modal-header {
    border: none;
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 56px;
    padding: 0;
    .ant-modal-title{
      .custom-btn{
        width: 56px;
        height: 56px;
        border: none;
        box-shadow: none;
      }
    }
  }
  .daily-article{
    border-bottom: 0;
  }
}
</style>
<style scoped lang="less">
.daily-article {
  .article-button {
    font-size: 1.2rem !important;
  }
  .ant-card-body {
    padding: 18px !important;
  }
  .ant-card-head {
    padding: 0 1rem;
  }
  .ant-card-meta {
    margin-bottom: 1rem;
  }
  .article-content {
    p {
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: initial;
      white-space: normal;
      font-size: .9rem !important;
      margin-bottom: .8rem;
    }
  }
}
</style>
